<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单确认 - 电商网站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1 class="logo">电商网站</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="#" id="login-link">登录</a></li>
                    <li><a href="register.html">注册</a></li>
                    <li><a href="cart.html">购物车 (<span id="cart-count">0</span>)</a></li>
                    <li><a href="profile.html">我的账户</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <div class="checkout-steps">
            <div class="step active">1. 购物车</div>
            <div class="step active">2. 订单确认</div>
            <div class="step">3. 完成订单</div>
        </div>

        <h1>订单确认</h1>
        
        <div class="order-container">
            <div class="order-section">
                <h2><i class="icon-user"></i> 收货信息</h2>
                <div id="shipping-info">
                    <!-- 收货信息将通过JavaScript动态加载 -->
                </div>
                <button id="edit-shipping" class="edit-btn">修改</button>
            </div>
            
            <div class="order-section">
                <h2><i class="icon-credit-card"></i> 支付方式</h2>
                <form id="payment-method">
                    <div class="payment-option">
                        <input type="radio" id="payment-alipay" name="payment" value="alipay" checked>
                        <label for="payment-alipay">支付宝</label>
                    </div>
                    <div class="payment-option">
                        <input type="radio" id="payment-wechat" name="payment" value="wechat">
                        <label for="payment-wechat">微信支付</label>
                    </div>
                    <div class="payment-option">
                        <input type="radio" id="payment-card" name="payment" value="card">
                        <label for="payment-card">信用卡/借记卡</label>
                    </div>
                </form>
            </div>
            
            <div class="order-section">
                <h2><i class="icon-list"></i> 订单详情</h2>
                <div class="order-items" id="order-items">
                    <!-- 订单商品将通过JavaScript动态加载 -->
                </div>
            </div>
            
            <div class="order-summary">
                <h2><i class="icon-summary"></i> 订单摘要</h2>
                <div class="summary-row">
                    <span>商品总价:</span>
                    <span id="order-subtotal">$0.00</span>
                </div>
                <div class="summary-row">
                    <span>运费:</span>
                    <span id="order-shipping">$0.00</span>
                </div>
                <div class="summary-row">
                    <span>优惠券:</span>
                    <span id="order-discount">-$0.00</span>
                </div>
                <div class="summary-row total">
                    <span>应付总额:</span>
                    <span id="order-total">$0.00</span>
                </div>
                
                <div class="coupon-section">
                    <input type="text" id="coupon-code" placeholder="输入优惠码">
                    <button id="apply-coupon" class="apply-btn">应用</button>
                </div>
                
                <button id="place-order" class="submit-btn">提交订单</button>
                <p class="secure-checkout">
                    <i class="icon-lock"></i> 安全支付保障
                </p>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 电商网站. 保留所有权利.</p>
        </div>
    </footer>

    <script src="js/order.js"></script>
</body>
</html>